<template>
  <div class="header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :class="{darkMenu:darkTheme}">
          <!-- background-color="#2c3e50" -->
          <el-container class="main header-inner">
            <el-menu-item index="1"><router-link to="/"><i class="el-icon-platform-eleme"></i>首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/page"><i class="el-icon-notebook-1"></i>文章</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/album"><i class="el-icon-picture-outline"></i>相册</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to="/manage"><i class="el-icon-setting"></i> 管理</router-link></el-menu-item>
            <span id="logo"  @click="changeTheme">Anyway<i class="el-icon-magic-stick" id="theme" title="切换主题"></i></span>
          </el-container>
        </el-menu>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
export default {
    data() {
      return {
        activeIndex: '1',
        input1:''
      };
    },
    computed:{
      ...mapState("common",["darkTheme"])
    },
    methods: {
      ...mapMutations("common",["setDarkTheme"]),
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      },
      changeTheme(){
        let iconStr = !this.darkTheme? 'el-icon-moon':'el-icon-sunny'
        let bgStr = this.darkTheme? 'rgba(50, 50 ,50 , .7)' : 'rgba(255, 255 ,255 , .7)'
        const loading = this.$loading({ //显示loading遮罩
          lock: true,text: 'Loading...',
          spinner: iconStr,
          background: bgStr
        });
        setTimeout(()=>{
          this.setDarkTheme(!this.darkTheme)
          loading.close();
        },800)
      }
    }
}
</script>

<style>
.header{
  position: fixed;
  width: 100%;
  z-index: 1500;
  /* z-index为啥1500？ 因为饿了么，mavon-editor自带的组件都有自己的z-index,根据他们的关系来设置。*/
  top: 0;
}
.el-container{
  outline: none;
}
.el-menu-item{
    padding: 0;
    width: 100px;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
   
} 
.el-menu-item  [class^=el-icon-]{
      margin-left: -10px;
}
.header-inner{
  position: relative;
}
.router-link-exact-active{
  color: #1989fa!important;
  position: relative;
}
.router-link-exact-active i{
  color: #1989fa!important;
}
.el-menu-item a{
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #909399;
}

#logo{
  align-self: center;
    margin-left: 600px;
    font-size: 30px;
    color: #2196f3;
    font-style: italic;
    cursor: pointer;
}

#theme{
    transform: rotateZ(280deg);
    margin-left: 20px;
    
}

/* 主题定制 */
.darkMenu{
  background-color: #263c4f;
  border-bottom: 1px solid #2196f3!important;
}
.darkMenu .el-menu-item a{
  color: #c6d2ea;
}
.darkMenu .el-menu-item i{
  color: #c6d2ea;
}
.darkMenu .router-link-exact-active i{
  color: #2196f3;
}
.darkMenu .el-menu-item:hover{
  background-color: rgba(103 ,134, 139,.5);
  color:#409EFF;
}

</style>